<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0"/>
<title>电影选购</title>
<link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
<link href="../showstatic/css/tickets.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="../showstatic/js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="../showstatic/js/phone.js" ></script>
<script type="text/javascript" src="../showstatic/js/menu_x.js"></script>
</head>

<body>
<div class="whole" id="whole">

	<header class="header">
        <a href="javascript:history.back(-1)" class="fa fa-angle-left"></a>
        <span class="names">孵化园万达影城店</span>
        <span class="collect">
        	<i class="fa fa-star-o"></i>
        </span>
    </header>
    
    <div class="film-length">
    	<span>片长：[[${scheduleMsg.duration}]]分钟</span>
        <span class="imax">[[${scheduleMsg.movename}]]</span>
    </div>
    
    <div class="tips">温馨提示：电影开场前30分钟关闭在线售票</div>
    <div class="tab date" id="tabdate">
        <!---tab日期标签滑动--->
        <div id="J_MenuX">
            <div class="xs-container">
                <ul class="xs-content nav nav-pills nav-justified" id="menus_xx" _xx="0" >
                    <li v-text="months.movieMonth"  v-for="months in timeData"  @click="paipain(months.movieYMD)"></li>
                </ul>
            </div>
        </div>
        <!---tab标签滑动END--->
    </div>
    
    <div class="tickets-list">
    	<ul>
        	<li v-for="info in infoData">
            	<div class="ticket-info">
                	<span class="start" v-text="info.startTimeHM"></span>
                    <span class="styles" v-text="info.movename"></span>
                    <span>{{info.endTimeHM}}(结束)</span>
                    <span v-text="info.hallname"></span>
                </div>
                <div class="buy-btn">
                	<span>{{info.scheduleprice}}<b>元</b></span>
                    <a @click="paymove(info.id)">选座购票</a>
                </div>
            </li>
        </ul>
    </div>
    
</div>
<!--VUE.Js文件-->
<script src="../evan/vue/vue-2.4.0.js"></script>
<script src="../evan/vue/vue-resource-1.3.4.js"></script>
<!--逻辑实现-->
<script>
    window.onload=function () {
        //获取url传过来的id
        var url = location.search;
        var movieId = url.substr(4);
        new Vue({
            el:'#whole',
            data:{
                //时间导航集合
                timeData:[],
                //信息集合
                infoData:[]
            },
            //页面加载则加载方法
            mounted:function(){
                this.TimeMovies();
            },
            methods:{
                //页面加载方法啊
                TimeMovies:function(){
                    this.$http.get('http://127.0.0.1:8080/schedule/findScheduleE?id='+movieId,{
                    }).then(function (res) {
                        this.timeData = res.body;
                        console.log(this.timeData);
                    })
                },
                //该时间下的信息
                paipain:function(month){
                    var moveMonth = month;
                    this.$http.get('http://127.0.0.1:8080/schedule/findScheduleET?movieId='+movieId+'&'+'begTime='+moveMonth,{
                    }).then(function (res) {
                        this.infoData = res.body;
                      console.log(this.infoData);
                    })
                },
                //购票
                paymove:function(id){
                    window.location = "/movieshow/choose_seat.html?id="+id;
                }
            }
        })
    }

</script>
<script>
$(function(){
	$('.collect .fa').click(function(){
		if($(this).hasClass('fa-star-o')){
			$(this).removeClass('fa-star-o').addClass('fa-star');
		}else{
			$(this).removeClass('fa-star').addClass('fa-star-o');
		}
	});
		
})
</script>

</body>
</html>
